<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">

      <view class="searchWrap">

        <picker mode="date" fields="month" :value="chooseDate" :start="chooseDateBegin" @change="chooseDateChange">
          <view class="pickerInner">
            <view class="pickerInnerText" v-if="chooseDate">{{ chooseDate }}</view>
            <view class="pickerInnerText" v-else>请选择月份</view>
            <view class="pickerInnerIcon"></view>
          </view>
        </picker>

        <picker mode="selector" range-key="label" :value="rangeIndex" :range="rangeList" @change="rangeChange">
          <view class="pickerInner">
            <view class="pickerInnerText" v-if="rangeIndex>-1">{{ rangeList[rangeIndex].label }}</view>
            <view class="pickerInnerText" v-else>请选择发票类型</view>
            <view class="pickerInnerIcon"></view>
          </view>
        </picker>
      </view>


    </view>
    <view class="inner">

      <view class="reList">
        <view class="reLi" v-for="(n,i) in list" :key="i" @click="showDetail(n,i)">
          <view class="liIcon" :class="{liIcon1:true}"></view>
          <view class="liContent">
            <view class="liContent1">发票号：325862542</view>
            <view class="liContent2">2022年4月1日—2022年4月5日</view>
          </view>
          <view class="liRight">¥13299</view>
        </view>
      </view>

    </view>
    <view class="innerNext">
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [
        {},
      ],
      rangeList: [
        {
          value: '11',
          label: '11',
        },
      ],
      rangeIndex: -1,

      chooseDate: '',
      chooseDateBegin: '',
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    showDetail(n, i){
      util.linkTo('/pages/user/receiptDetail?id=111')
    },
    rangeChange(e){
      rangeIndex = e.detail.value
    },
    chooseDateChange(e){
      this.chooseDate = e.detail.value
    },
  },
}
</script>
<style lang="scss">
//@import "./000.scss";

page {
  background-color: #F7F9FB;
}

.innerPre {

}

.inner {

}

.innerNext {

}

.searchWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.reList {
  .reLi {
    display: flex;
    align-items: center;
    padding: 24px;
    background: white;
    .liIcon {
      width: 48px;
      height: 48px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;

      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;

    }
    .liIcon1 {
      background-image: url(#{$bgPath}/icon_receipt_01.png);

    }
    .liIcon2 {
      background-image: url(#{$bgPath}/icon_receipt_01.png);
    }
    .liContent {
      margin-left: 20px;
      .liContent1 {
        font-size: 30px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 44px;
      }
      .liContent2 {
        font-size: 24px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 36px;
      }
    }

    .liRight {
      font-size: 32px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.8);
      line-height: 48px;

      margin-left: auto;
    }
  }
}


</style>
